<template>
  <div v-loading="loading">
    <el-row :gutter="24">
      <!-- 左上角：基本信息 -->
      <el-col :span="14" class="detail-info-item">
  <el-card shadow="never">
    <template #header>
      <slot name="header">货物明细</slot>
    </template>
    <el-row>
   
      <el-col :span="24">
        <el-table 
      :data="list" 
    > 
      <el-table-column align="center" label="物品名称" prop="name" width="120px" /> 
      <el-table-column align="center" label="长(cm)" prop="chang"  /> 
      <el-table-column align="center" label="宽(cm)" prop="kuan"   />  
      <el-table-column align="center" label="高(cm)" prop="gao"  />  
      <el-table-column align="center" label="重量（kg）" prop="zhongliang"  />  
      <el-table-column align="center" label="图示" prop="tushi"  />     
      <el-table-column align="center" label="备注" prop="beizhu"  />     
      
    </el-table> 
      </el-col>
    </el-row>
  </el-card>
      </el-col>
      <el-col :span="10">
        <el-card shadow="never">
    <template #header>
      <slot name="header">{{id==1 ?'国际' : '国内'}}运输说明</slot>
    </template>
    <el-row>
      <el-col :span="24">
        <el-descriptions :column="1"  v-if="id==1"> 
          <el-descriptions-item>
            <template #label>
              <descriptions-item-label label="目的地国家" icon="ep:document" />
            </template>
            目的地国家
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <descriptions-item-label label="送货地址" icon="ep:document" />
            </template>
            送货地址
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <descriptions-item-label label="提货地址" icon="ep:document" />
            </template>
            提货地址
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <descriptions-item-label label="预计提货时间" icon="ep:document" />
            </template>
            预计提货时间
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <descriptions-item-label label="运输方式" icon="ep:document" />
            </template> 
            运输方式
          </el-descriptions-item>
          
          <el-descriptions-item>
            <template #label>
              <descriptions-item-label label="出口方式" icon="ep:document" />
            </template> 
            出口方式
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <descriptions-item-label label="货值(人民币)" icon="ep:document" />
            </template> 
            货值(人民币)
          </el-descriptions-item> 
          <el-descriptions-item>
            <template #label>
              <descriptions-item-label label="交付方式" icon="ep:document" />
            </template> 
           交付方式
          </el-descriptions-item> 
          <el-descriptions-item>
            <template #label>
              <descriptions-item-label label="涉及电池/品牌" icon="ep:document" />
            </template> 
            涉及电池/品牌
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <descriptions-item-label label="涉及电池说明" icon="ep:document" />
            </template> 
            涉及电池/品牌
          </el-descriptions-item>
        </el-descriptions>

        <el-descriptions :column="1" v-if="id!=1"> 
          <el-descriptions-item>
            <template #label>
              <descriptions-item-label label="是否需要回运" icon="ep:document" />
            </template>
            单程
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <descriptions-item-label label="送货地址" icon="ep:document" />
            </template>
            送货地址
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <descriptions-item-label label="提货地址" icon="ep:document" />
            </template>
            提货地址
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <descriptions-item-label label="预计提货时间" icon="ep:document" />
            </template>
            预计提货时间
          </el-descriptions-item> 
           
          <el-descriptions-item>
            <template #label>
              <descriptions-item-label label="货值(人民币)" icon="ep:document" />
            </template> 
            货值(人民币)
          </el-descriptions-item> 
          <el-descriptions-item>
            <template #label>
              <descriptions-item-label label="搬运人工人数" icon="ep:document" />
            </template> 
           搬运人工人数
          </el-descriptions-item> 
          <el-descriptions-item>
            <template #label>
              <descriptions-item-label label="涉及电池/品牌" icon="ep:document" />
            </template> 
            涉及电池/品牌
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <descriptions-item-label label="涉及电池说明" icon="ep:document" />
            </template> 
            涉及电池说明
          </el-descriptions-item>
        </el-descriptions>
      </el-col>
    </el-row>
  </el-card>
      </el-col>
    </el-row>
  </div>

  <!-- 表单弹窗：添加/修改 -->
  <UserForm ref="formRef" @success="getUserData(id)" />
</template>
<script lang="ts" setup>
import * as WalletApi from '@/api/pay/wallet/balance'
import * as UserApi from '@/api/member/user'
import { useTagsViewStore } from '@/store/modules/tagsView'
import UserForm from '@/views/member/user/UserForm.vue'
import UserAccountInfo from './UserAccountInfo.vue'
import daigouyingjian from './daigouyingjian.vue'
import UserBasicInfo from './UserBasicInfo.vue'
import UserBrokerageList from './UserBrokerageList.vue'
import jilu from './jilu.vue'
import ruanjiankaifa from './ruanjiankaifa.vue'
import wuliu from './wuliu.vue'
import neirongzhizuo from './neirongzhizuo.vue'
import sucaidaigou from './sucaidaigou.vue'
import qita from './qita.vue'
import renli from './renli.vue'
import dingzhiruanjian from './dingzhiruanjian.vue'
import { CardTitle } from '@/components/Card/index'
import { ElMessage } from 'element-plus'

defineOptions({ name: 'MemberDetail' })

const loading = ref(true) // 加载中
const user = ref<UserApi.UserVO>({} as UserApi.UserVO)

/** 添加/修改操作 */
const formRef = ref()
const openForm = (type: string) => {
  formRef.value.open(type, id)
}

/** 获得用户 */
const getUserData = async (id: number) => {
  loading.value = true
  try {
    user.value = await UserApi.getUser(id)
  } finally {
    loading.value = false
  }
}

const list = [{name:'手机壳',chang:100,kuan:50,gao:10,zhongliang:10,beizhu:'备注一下'},{name:'手机壳1',chang:100,kuan:50,gao:10,zhongliang:10,beizhu:'备注一下'}]

/** 初始化 */
const { currentRoute } = useRouter() // 路由
const { delView } = useTagsViewStore() // 视图操作
const route = useRoute()
const id = Number(route.params.id)
/* 用户钱包相关信息 */
const WALLET_INIT_DATA = {
  balance: 0,
  totalExpense: 0,
  totalRecharge: 0
} as WalletApi.WalletVO // 钱包初始化数据
const wallet = ref<WalletApi.WalletVO>(WALLET_INIT_DATA) // 钱包信息

/** 查询用户钱包信息 */
const getUserWallet = async () => {
  if (!id) {
    wallet.value = WALLET_INIT_DATA
    return
  }
  const params = { userId: id }
  wallet.value = (await WalletApi.getWallet(params)) || WALLET_INIT_DATA
}

onMounted(() => {
  if (!id) {
    ElMessage.warning('参数错误，会员编号不能为空！')
    delView(unref(currentRoute))
    return
  }
  getUserData(id)
  getUserWallet()
})
</script>
<style lang="css" scoped>
.detail-info-item:first-child {
  padding-left: 0 !important;
}

/* first-child 不生效有没有大佬给看下q.q */
.detail-info-item:nth-child(2) {
  padding-right: 0 !important;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
